<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        a:hover {
            text-decoration: underline;
        }
    </style>
    <script type="application/javascript">
        function change(url, index) {
            $(".nav-link").removeClass("active");
            $(".nav-link").eq(index).addClass("active");
            $("iframe").attr("src", url);
        }
    </script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-center">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="javascript:void(0)" onclick="change('/photo/bgWall',0)">相册背景墙</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" onclick="change('/photo/solid',1)">立体相框</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" onclick="change('/photo/album',2)">相册锦集</a>
        </li>
    </ul>
</nav>
<div>
    <iframe style="width: 100%; height:600px; border: 0px;" src="/photo/bgWall"></iframe>
</div>
</body>
</html>
